function Settings(){
    document.querySelector('button.NavigationBtn.mark[this]').removeAttribute('this');
    document.querySelector('button.NavigationBtn.mark#Settings').toggleAttribute('this');
    const children = document.querySelector('div#Frame').children;
    for (var i = 0; i < children.length; i++){
        if (children[i].id != 'nohide'){
            children[i].classList.add('hide');
        }
    }
    document.querySelector('div#Frame div#Settings').classList.remove('hide');
    closeMenu();
    initSettingInterface();
}

// - jQuery - //
$(document).ready(function(){
    $('.card-header').click(function(event){
        if (!$(event.target).is('div.container, svg.icon, button') || !$(event.target).is('div[no-open]')){
            $(this).next('.card-content').slideToggle(200);
            const switchIcon = $(this).find('svg.icon.arrow');
            if (switchIcon.attr('open')) {
                removeCustomAttribute(switchIcon[0], 'open')
            } else {
                switchIcon.attr('open', '');T
            }
        } else {
            event.stopPropagation();
        }
    });
});
// ---------- //

function removeCustomAttribute(element, attribute){
    element.removeAttribute(attribute);
}

function onRadiusBtnClicked(self){
    const radioBtns = document.querySelectorAll('input.radio-btn');
    radioBtns.forEach(b => b.removeAttribute('checked'));
    setTimeout(() => self.toggleAttribute('checked'), 20)
}

function generateCounterSettingUnit(mytitle, myinfo, inCid){
    var cid = document.querySelector(`div#c${inCid}.countUnit`).getAttribute('cid')
    //
    const div = document.createElement('div');
    div.className = 'countSettingUnit';
    //
    const title = document.createElement('h3');
    title.className = 'csuTitle';
    title.innerText = mytitle;
    div.appendChild(title);
    //
    const info = document.createElement('span');
    info.className = 'csuInfo';
    info.innerText = myinfo;
    div.appendChild(info);
    //
    const button = document.createElement('button');
    button.classList.add('qfwButton')
    //
    const container = document.createElement('div');
    container.className = 'container';
    //
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('t', '1703784750711');
    svg.setAttribute("class", "icon");
    svg.setAttribute('viewBox', '0 0 1024 1024');
    svg.setAttribute('version', '1.1');
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    svg.setAttribute('p-id', '1511');
    svg.setAttribute('width', '24');
    svg.setAttribute('height', '24');
    //
    const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path1.setAttribute('d', 'M207.252251 346.508875l0 551.984666c0 30.377868 25.331945 54.835909 55.709813 54.835909l497.087359 0c30.377868 0 55.04671-24.459065 55.04671-54.835909L815.096133 346.508875 207.252251 346.508875zM373.027855 843.835687l-55.258535 0 0-387.833049 55.258535 0L373.027855 843.835687zM483.544925 843.835687l-54.235229 0 0-387.833049 54.235229 0L483.544925 843.835687zM595.0853 843.835687l-56.281841 0 0-387.833049 56.281841 0L595.0853 843.835687zM704.579063 843.835687l-55.258535 0 0-387.833049 55.258535 0L704.579063 843.835687z');
    path1.setAttribute('p-id', '1512');
    //
    const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path2.setAttribute('d', 'M829.088822 180.733271 649.320529 180.733271 649.320529 111.438045c0-22.782889-18.376533-41.221844-41.159422-41.221844L414.849356 70.216201c-22.782889 0-41.821501 18.438954-41.821501 41.221844l0 69.295226L193.921641 180.733271c-22.782889 0-41.927925 18.385742-41.927925 41.168632l0 68.325132 718.360951 0 0-68.325132C870.354668 199.119013 851.872734 180.733271 829.088822 180.733271zM595.0853 180.733271l-165.775604 0 0-55.258535 165.775604 0L595.0853 180.733271z');
    path2.setAttribute('p-id', '1513');
    //
    svg.appendChild(path1);
    svg.appendChild(path2);
    container.appendChild(svg);
    //
    var removeText = document.createElement('span');
    removeText.innerText = 'Remove';
    container.appendChild(removeText);
    //
    button.appendChild(container);
    div.appendChild(button);
    //
    button.addEventListener('click', function(){
        lyDialogType1(0, mytitle, myinfo, cid)
    });
    return div
}

function initSettingInterface(){
    // Clear
    const counterSetting = document.querySelector('div#counterSetting');
    while (counterSetting.firstChild) {
        counterSetting.removeChild(counterSetting.firstChild);
    }
    // Put
    callServer('/counter/getAllCounter',`updateUserID=${localStorage.getItem('ID')}`, null, 'GET')
        .then(response => {
            if (response[0].length == 0){
                const p = document.createElement('p')
                p.innerHTML = 'No counter units . . .'
                p.style.color = 'var(--color-5)'
                p.style.marginLeft = '10px'
                document.querySelector('div#counterSetting').appendChild(p)
            } else {
                for (let i = 0; i < response[0].length; i++){
                    const div = generateCounterSettingUnit(response[0][i].name, `（Value ${response[0][i].value} by ${response[0][i].ID}）`, response[0][i].cid)
                    document.querySelector('div#counterSetting').appendChild(div)
                }
            }
        })
        .catch(status => {
            console.warn(`Request to server was rejected with Error or HTTP Status: ${status}`)
            lyDialogType4(status)
        })
}

initSettingInterface()

setInterval(() => {
    if(document.querySelector('input#light').getAttribute('checked') == '' && localStorage.getItem('theme') == 'dark'){
        setTheme('light')
        localStorage.setItem('theme', 'light')
    }
    if(document.querySelector('input#dark').getAttribute('checked') == '' && localStorage.getItem('theme') == 'light'){
        setTheme('dark')
        localStorage.setItem('theme', 'dark')
    }
}, 200)